<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>充值</p>
		</header>

		<!-- 充值表单 -->
		<div class="recharge-form">
			<!-- 金额输入 -->
			<div class="amount-section">
				<h3>充值金额</h3>
				<div class="amount-input">
					<span class="currency">¥</span>
					<input
						type="number"
						v-model="rechargeAmount"
						placeholder="请输入充值金额"
						min="0.01"
						step="0.01"
						@input="calculateReward"
					/>
				</div>

				<!-- 快捷金额选择 -->
				<div class="quick-amounts">
					<button
						v-for="amount in quickAmounts"
						:key="amount"
						@click="selectQuickAmount(amount)"
						:class="{ active: rechargeAmount == amount }"
					>
						¥{{ amount }}
					</button>
				</div>
			</div>

			<!-- 奖励规则展示 -->
			<div class="reward-rules" v-if="rewardRules.length > 0">
				<h3>充值奖励</h3>
				<div class="rules-list">
					<div
						v-for="rule in rewardRules"
						:key="rule.id"
						class="rule-item"
						:class="{ active: isRuleActive(rule) }"
					>
						<p>{{ getRuleDescription(rule) }}</p>
						<p class="reward-amount" v-if="isRuleActive(rule)">
							奖励: ¥{{ calculateRewardAmount(rule).toFixed(2) }}
						</p>
					</div>
				</div>
			</div>

			<!-- 充值总结 -->
			<div class="recharge-summary" v-if="rechargeAmount > 0">
				<div class="summary-item">
					<span>充值金额:</span>
					<span>¥{{ rechargeAmount }}</span>
				</div>
				<div class="summary-item" v-if="currentReward > 0">
					<span>奖励金额:</span>
					<span class="reward-text">¥{{ currentReward.toFixed(2) }}</span>
				</div>
				<div class="summary-item total">
					<span>预计到账:</span>
					<span class="total-text">¥{{ (parseFloat(rechargeAmount) + currentReward).toFixed(2) }}</span>
				</div>
			</div>

			<!-- 支付方式选择 -->
			<div class="payment-methods">
				<h3>支付方式</h3>
				<ul class="payment-list">
					<li @click="selectPaymentMethod('alipay')" :class="{ selected: selectedPayment === 'alipay' }">
						<img src="../assets/alipay.png" alt="支付宝支付">
						<i class="fa fa-check-circle"></i>
					</li>
					<li @click="selectPaymentMethod('wechat')" :class="{ selected: selectedPayment === 'wechat' }">
						<img src="../assets/wechat.png" alt="微信支付">
						<i class="fa fa-check-circle"></i>
					</li>
					<li @click="selectPaymentMethod('bank')" :class="{ selected: selectedPayment === 'bank' }">
						<i class="fa fa-university"></i>
						<span>银行卡支付</span>
						<i class="fa fa-check-circle"></i>
					</li>
				</ul>
			</div>

			<!-- 充值备注 -->
			<div class="recharge-notes">
				<textarea
					v-model="rechargeRemark"
					placeholder="请输入充值备注（选填）"
					maxlength="100"
				></textarea>
				<p class="note-count">{{ rechargeRemark.length }}/100</p>
			</div>
		</div>

		<!-- 操作按钮 -->
		<div class="action-buttons">
			<button class="cancel-btn" @click="goBack">取消</button>
			<button
				class="confirm-btn"
				@click="confirmRecharge"
				:disabled="isProcessing || !isFormValid"
			>
				<span v-if="isProcessing">处理中...</span>
				<span v-else>确认充值</span>
			</button>
		</div>

		<!-- 加载状态 -->
		<div v-if="isLoading" class="loading">
			<p>加载中...</p>
		</div>

		<!-- 错误提示 -->
		<div v-if="errorMsg" class="error-msg">
			<p>{{ errorMsg }}</p>
		</div>

		<!-- 成功提示弹窗 -->
		<div v-if="showSuccessModal" class="modal-overlay" @click="closeSuccessModal">
			<div class="modal-content" @click.stop>
				<div class="modal-icon success">
					<i class="fa fa-check-circle"></i>
				</div>
				<h3 class="modal-title">充值成功</h3>
				<p class="modal-message">{{ successMessage }}</p>
				<button class="modal-btn" @click="closeSuccessModal">确定</button>
			</div>
		</div>

		<!-- 失败提示弹窗 -->
		<div v-if="showErrorModal" class="modal-overlay" @click="closeErrorModal">
			<div class="modal-content" @click.stop>
				<div class="modal-icon error">
					<i class="fa fa-times-circle"></i>
				</div>
				<h3 class="modal-title">充值失败</h3>
				<p class="modal-message">{{ errorModalMessage }}</p>
				<button class="modal-btn" @click="closeErrorModal">确定</button>
			</div>
		</div>

		<!-- 底部菜单 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import axios from 'axios';

export default {
	name: 'WalletRecharge',
	components: {
		Footer
	},
	data() {
		return {
			rechargeAmount: '',
			rechargeRemark: '',
			selectedPayment: 'alipay',
			quickAmounts: [100, 500, 1000, 2000],
			rewardRules: [
				// 根据后端 RewardRuleInitializer.java 定义的规则
				// 按条件金额降序排列，与后端查询逻辑一致
				{
					id: 3,
					conditionAmount: 1000,
					rewardAmount: 100
				},
				{
					id: 2,
					conditionAmount: 500,
					rewardAmount: 30
				},
				{
					id: 1,
					conditionAmount: 100,
					rewardAmount: 5
				}
			],
			currentReward: 0,
			isLoading: false,
			isProcessing: false,
			errorMsg: '',
			showSuccessModal: false,
			showErrorModal: false,
			successMessage: '',
			errorModalMessage: ''
		};
	},
	computed: {
		isFormValid() {
			return this.rechargeAmount > 0 && !this.isProcessing;
		}
	},
	methods: {
		selectQuickAmount(amount) {
			this.rechargeAmount = amount;
			this.calculateReward();
		},
		calculateReward() {
			const amount = parseFloat(this.rechargeAmount) || 0;
			let maxConditionAmount = 0;
			let applicableReward = 0;

			// 根据后端规则计算奖励：找到满足条件的最高条件金额规则
			// 后端使用 findTopRechargeRuleByAmount，按 conditionAmount 降序，取第一个满足条件的
			// 后端规则：100元奖励5元，500元奖励30元，1000元奖励100元
			for (const rule of this.rewardRules) {
				const conditionAmount = parseFloat(rule.conditionAmount) || 0;
				if (amount >= conditionAmount && conditionAmount > maxConditionAmount) {
					maxConditionAmount = conditionAmount;
					applicableReward = parseFloat(rule.rewardAmount) || 0;
				}
			}

			this.currentReward = applicableReward;
		},
		isRuleActive(rule) {
			const amount = parseFloat(this.rechargeAmount) || 0;
			const conditionAmount = parseFloat(rule.conditionAmount) || 0;
			return amount >= conditionAmount;
		},
		calculateRewardAmount(rule) {
			// 直接返回固定奖励金额
			return parseFloat(rule.rewardAmount) || 0;
		},
		getRuleDescription(rule) {
			const conditionAmount = parseFloat(rule.conditionAmount) || 0;
			const rewardAmount = parseFloat(rule.rewardAmount) || 0;
			return `满${conditionAmount}元赠送${rewardAmount}元`;
		},
		selectPaymentMethod(method) {
			this.selectedPayment = method;
		},
		async confirmRecharge() {
			if (!this.isFormValid) return;

			this.isProcessing = true;
			this.errorMsg = '';

			try {
				const token = localStorage.getItem('id_token');
				if (!token) {
					this.$router.push('/login');
					return;
				}

				// 充值前获取当前余额，用于计算实际奖励
				let balanceBefore = 0;
				try {
					const balanceResponse = await axios.get('wallet/balance', {
						headers: {
							'Authorization': `Bearer ${token}`
						}
					});
					if (balanceResponse.data && balanceResponse.data.success && 
						(balanceResponse.data.code === 200 || balanceResponse.data.code === 0)) {
						balanceBefore = balanceResponse.data.data.balance || 0;
					}
				} catch (e) {
					// 如果获取余额失败，继续充值流程
				}

				// 根据后端接口文档，使用Query参数格式
				const response = await axios.post('wallet/recharge', null, {
					headers: {
						'Authorization': `Bearer ${token}`
					},
					params: {
						amount: parseFloat(this.rechargeAmount),
						remark: this.rechargeRemark || `${this.selectedPayment}充值`
					},
					timeout: 10000 // 10秒超时
				});

				// 检查响应格式 - 后端返回 code: 200 表示成功
				if (response.data && response.data.success && (response.data.code === 200 || response.data.code === 0)) {
					// 从后端返回的钱包余额计算实际奖励
					const balanceAfter = response.data.data.balance || 0;
					const actualIncrease = balanceAfter - balanceBefore; // 实际增加的金额
					const actualReward = actualIncrease - parseFloat(this.rechargeAmount); // 实际奖励 = 增加金额 - 充值金额
					const actualAmount = parseFloat(this.rechargeAmount) + actualReward; // 实际到账金额

					// 构建成功消息
					let message = `充值成功！充值金额：¥${this.rechargeAmount}`;
					if (actualReward > 0) {
						message += `，奖励金额：¥${actualReward.toFixed(2)}`;
					}
					message += `，实际到账：¥${actualAmount.toFixed(2)}`;
					
					this.successMessage = message;
					this.showSuccessModal = true;
				} else {
					// 充值失败，显示失败弹窗
					this.errorModalMessage = response.data?.message || '充值失败，请重试';
					this.showErrorModal = true;
				}
			} catch (error) {
				let errorMessage = '';

				if (error.response) {
					// 服务器返回了错误状态码
					const status = error.response.status;
					const errorData = error.response.data;
					
					if (status === 500) {
						// 服务器内部错误
						errorMessage = errorData?.message || '服务器内部错误，请稍后重试';
					} else if (status === 400) {
						// 请求参数错误
						errorMessage = errorData?.message || '请求参数错误，请检查输入';
					} else if (status === 401) {
						// 未授权
						errorMessage = '登录已过期，请重新登录';
						this.$router.push('/login');
						return;
					} else {
						errorMessage = errorData?.message || `充值失败 (${status})`;
					}
				} else if (error.code === 'ECONNABORTED') {
					// 请求超时
					errorMessage = '请求超时，请检查网络连接';
				} else if (error.message) {
					// 其他错误
					errorMessage = error.message;
				} else {
					// 未知错误
					errorMessage = '网络错误，请重试';
				}

				// 显示失败弹窗
				this.errorModalMessage = errorMessage;
				this.showErrorModal = true;
			} finally {
				this.isProcessing = false;
			}
		},
		closeSuccessModal() {
			this.showSuccessModal = false;
			// 关闭弹窗后跳转回钱包首页
			this.$router.push('/wallet');
		},
		closeErrorModal() {
			this.showErrorModal = false;
		},
		goBack() {
			this.$router.push('/wallet');
		}
	},
	mounted() {
		// 奖励规则已硬编码，与后端保持一致
	}
};
</script>

<style scoped>
.wrapper {
	padding-bottom: 60px;
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	background-attachment: fixed;
}

header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	padding: 5vw 4vw;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	position: relative;
	overflow: hidden;
}

header::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.5;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

header p {
	margin: 0;
	font-size: 4.5vw;
	font-weight: 600;
	position: relative;
	z-index: 1;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.recharge-form {
	background: #fff;
	margin: 4vw 3vw;
	border-radius: 3vw;
	padding: 5vw;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s, box-shadow 0.3s;
}

.recharge-form:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* 金额输入 */
.amount-section h3 {
	margin: 0 0 4vw 0;
	font-size: 4.5vw;
	color: #333;
	font-weight: 600;
	display: flex;
	align-items: center;
}

.amount-section h3::before {
	content: '';
	width: 4px;
	height: 4vw;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 2px;
	margin-right: 2vw;
}

.amount-input {
	display: flex;
	align-items: center;
	border: 2px solid #e0e0e0;
	border-radius: 2vw;
	padding: 4vw 3vw;
	margin-bottom: 4vw;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	transition: all 0.3s;
}

.amount-input:focus-within {
	border-color: #667eea;
	box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
	transform: translateY(-2px);
}

.currency {
	font-size: 5.5vw;
	color: #667eea;
	margin-right: 2vw;
	font-weight: 700;
}

.amount-input input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 5vw;
	color: #333;
	font-weight: 600;
	background: transparent;
}

.amount-input input::placeholder {
	color: #ccc;
	font-weight: normal;
}

.quick-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5vw;
	margin-bottom: 4vw;
}

.quick-amounts button {
	flex: 1;
	min-width: 20vw;
	padding: 3vw 2vw;
	border: 2px solid #e0e0e0;
	border-radius: 2vw;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	color: #666;
	font-size: 3.5vw;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.quick-amounts button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-color: #667eea;
}

.quick-amounts button.active {
	border-color: #667eea;
	color: #667eea;
	background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
	box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
	font-weight: 600;
}

/* 奖励规则 */
.reward-rules h3 {
	margin: 5vw 0 4vw 0;
	font-size: 4.5vw;
	color: #333;
	font-weight: 600;
	display: flex;
	align-items: center;
}

.reward-rules h3::before {
	content: '';
	width: 4px;
	height: 4vw;
	background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
	border-radius: 2px;
	margin-right: 2vw;
}

.rules-list {
	background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
	border: 2px solid #91d5ff;
	border-radius: 2.5vw;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(82, 196, 26, 0.1);
}

.rule-item {
	padding: 4vw 3vw;
	border-bottom: 1px solid rgba(145, 213, 255, 0.3);
	font-size: 3.5vw;
	color: #666;
	transition: all 0.3s;
	background: #fff;
}

.rule-item:last-child {
	border-bottom: none;
}

.rule-item:hover {
	background: rgba(240, 249, 255, 0.8);
	transform: translateX(4px);
}

.rule-item.active {
	background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
	border-left: 4px solid #52c41a;
	box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2);
}

.rule-item p {
	margin: 0;
	line-height: 1.6;
}

.reward-amount {
	color: #52c41a;
	font-weight: 600;
	margin-top: 1.5vw;
	font-size: 4vw;
}

/* 充值总结 */
.recharge-summary {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	border-radius: 2.5vw;
	padding: 4vw;
	margin: 5vw 0;
	border: 2px solid #e0e7ff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2.5vw;
	margin-bottom: 2vw;
	font-size: 3.5vw;
	color: #666;
	background: #fff;
	border-radius: 1.5vw;
	transition: all 0.3s;
}

.summary-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transform: translateX(2px);
}

.summary-item:last-child {
	margin-bottom: 0;
}

.summary-item.total {
	border-top: 2px solid #e0e7ff;
	padding-top: 3vw;
	margin-top: 3vw;
	font-size: 4.5vw;
	font-weight: 600;
	color: #333;
	background: linear-gradient(135deg, #fff 0%, #f0f4ff 100%);
}

.reward-text {
	color: #52c41a;
	font-weight: 600;
	font-size: 4vw;
}

.total-text {
	color: #667eea;
	font-weight: 700;
	font-size: 5vw;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 支付方式 */
.payment-methods h3 {
	margin: 5vw 0 4vw 0;
	font-size: 4.5vw;
	color: #333;
	font-weight: 600;
	display: flex;
	align-items: center;
}

.payment-methods h3::before {
	content: '';
	width: 4px;
	height: 4vw;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 2px;
	margin-right: 2vw;
}

.payment-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.payment-list li {
	display: flex;
	align-items: center;
	padding: 4vw 3vw;
	border: 2px solid #e0e0e0;
	border-radius: 2.5vw;
	margin-bottom: 3vw;
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.payment-list li:last-child {
	margin-bottom: 0;
}

.payment-list li:hover {
	border-color: #667eea;
	background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

.payment-list li.selected {
	border-color: #667eea;
	background: linear-gradient(135deg, #e6f0ff 0%, #d6e8ff 100%);
	box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.payment-list li img {
	width: 10vw;
	height: 10vw;
	margin-right: 3vw;
	border-radius: 1vw;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.payment-list li .fa-university {
	font-size: 6vw;
	color: #667eea;
	margin-right: 3vw;
	width: 10vw;
	height: 10vw;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
	border-radius: 1vw;
}

.payment-list li span {
	flex: 1;
	font-size: 4vw;
	color: #333;
	font-weight: 500;
}

.payment-list li .fa-check-circle {
	font-size: 5vw;
	color: #52c41a;
	opacity: 0;
	transition: all 0.3s;
	background: #fff;
	border-radius: 50%;
	padding: 1vw;
	box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
}

.payment-list li.selected .fa-check-circle {
	opacity: 1;
	transform: scale(1.1);
}

/* 充值备注 */
.recharge-notes {
	margin-top: 5vw;
}

.recharge-notes textarea {
	width: 100%;
	border: 2px solid #e0e0e0;
	border-radius: 2vw;
	padding: 3.5vw;
	font-size: 3.5vw;
	color: #333;
	min-height: 18vw;
	resize: vertical;
	box-sizing: border-box;
	background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
	transition: all 0.3s;
}

.recharge-notes textarea:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
	background: #fff;
}

.recharge-notes textarea::placeholder {
	color: #ccc;
}

.note-count {
	text-align: right;
	font-size: 3vw;
	color: #999;
	margin-top: 1.5vw;
}

/* 操作按钮 */
.action-buttons {
	display: flex;
	gap: 3vw;
	margin: 4vw 3vw;
	position: sticky;
	bottom: 0;
	z-index: 10;
}

.action-buttons button {
	flex: 1;
	padding: 4.5vw 3vw;
	border: none;
	border-radius: 2.5vw;
	font-size: 4vw;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cancel-btn {
	background: linear-gradient(135deg, #f5f5f5 0%, #e9ecef 100%);
	color: #666;
}

.cancel-btn:hover {
	background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.cancel-btn:active {
	transform: translateY(0);
}

.confirm-btn {
	background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.confirm-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s;
}

.confirm-btn:hover:not(:disabled)::before {
	left: 100%;
}

.confirm-btn:hover:not(:disabled) {
	background: linear-gradient(135deg, #73d13d 0%, #52c41a 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(82, 196, 26, 0.4);
}

.confirm-btn:active:not(:disabled) {
	transform: translateY(0);
}

.confirm-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}

/* 加载和错误状态 */
.loading {
	text-align: center;
	padding: 8vw;
	color: #fff;
	font-size: 4vw;
	position: relative;
}

.loading::before {
	content: '';
	display: inline-block;
	width: 8vw;
	height: 8vw;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top: 4px solid #fff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 2vw;
	vertical-align: middle;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.error-msg {
	background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
	margin: 4vw 3vw;
	border-radius: 2.5vw;
	padding: 4vw;
	text-align: center;
	box-shadow: 0 4px 16px rgba(231, 76, 60, 0.2);
	border: 2px solid #ffcdd2;
}

.error-msg p {
	margin: 0;
	color: #e74c3c;
	font-size: 3.5vw;
	font-weight: 500;
}

/* 弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(5px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	animation: fadeIn 0.3s;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.modal-content {
	background: #fff;
	border-radius: 3.5vw;
	padding: 7vw 6vw;
	width: 85%;
	max-width: 400px;
	text-align: center;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
	animation: slideUp 0.3s;
	position: relative;
	overflow: hidden;
}

.modal-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

@keyframes slideUp {
	from {
		transform: translateY(30px) scale(0.95);
		opacity: 0;
	}
	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

.modal-icon {
	width: 18vw;
	height: 18vw;
	border-radius: 50%;
	margin: 0 auto 5vw;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10vw;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	animation: scaleIn 0.4s ease-out;
}

@keyframes scaleIn {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

.modal-icon.success {
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	color: #52c41a;
	border: 3px solid #52c41a;
}

.modal-icon.error {
	background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
	color: #e74c3c;
	border: 3px solid #e74c3c;
}

.modal-title {
	margin: 0 0 3vw 0;
	font-size: 5.5vw;
	font-weight: 700;
	color: #333;
}

.modal-message {
	margin: 0 0 6vw 0;
	font-size: 3.5vw;
	color: #666;
	line-height: 1.8;
	word-break: break-word;
}

.modal-btn {
	width: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	border-radius: 2.5vw;
	padding: 4vw 3vw;
	font-size: 4vw;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.modal-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(102, 126, 234, 0.4);
}

.modal-btn:active {
	transform: translateY(0);
}
</style>
